<template>
  <div></div>
  <!-- <v-scale-screen width="1920" height="1080">
    <div class="container">
      <div class="dashed-box"></div>
      <div class="dashed-box"></div>
      <div class="dashed-box"></div>
    </div>
  </v-scale-screen> -->
</template>
  
  <script>
export default {
  name: 'DashedBoxes',
  mounted() {
    // 设置容器高度为视口高度
    this.$el.querySelector('.container').style.height = `${window.innerHeight}px`
    window.addEventListener('resize', () => {
      this.$el.querySelector('.container').style.height = `${window.innerHeight}px`
    })
  },
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh; /* 初始设置为全屏高度 */
}

.dashed-box {
  /* border: 1px dashed #000; */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
</style>